<template>
    <div class="book-recommend-bar">
        <el-row class="recommend-title-row" type="flex" justify="center">
            <el-col :span="14">
                <p>教科书</p>
            </el-col>
        </el-row>
        <el-row class="recommend-table-row" type="flex" justify="center">
            <el-col :span="14">
                <el-card :body-style="{ padding: '0px' }" class="total-card">
                    <el-col :span="8" class="best-book">
                        <el-card class="best-book-card" :body-style="{ padding: '0px' }" shadow="never">
                            <el-col :span="4">
                                <el-image :src="recommendLogoUrl"></el-image>
                            </el-col>
                            <el-col class="best-book-content" :span="16">
                                <el-link :underline="false">{{bestBook.title}}</el-link>
                                <p class="best-book-author">作者：{{bestBook.author}}</p>
                                <p class="best-book-inf" :title="bestBook.content">{{bestBook.content}}</p>
                                <el-image class="best-book-image" :src="bestBook.url" :title="bestBook.title"></el-image>
                            </el-col>
                            <el-col :span="4"></el-col>
                        </el-card>
                    </el-col>
                    <el-col :span="9" class="good-book">
                        <el-row v-for="(goodBooks, key) in goodBookList " :key="key">
                            <el-col :span="12" v-for="goodBook in goodBooks" :key="goodBook.title">
                                <el-card class="good-book-card" :body-style="{ padding: '0px' }"
                                         shadow="never">
                                    <el-row class="good-book-img-row" type="flex" justify="center">
                                        <el-col :span="20">
                                            <el-link :underline="false" :title="goodBook.title">
                                                <el-image :src="goodBook.url"></el-image>
                                            </el-link>
                                        </el-col>
                                    </el-row>
                                    <el-row class="good-book-inf-row" type="flex" justify="center">
                                        <el-col :span="13">
                                            <el-link :underline="false" :title="goodBook.title">{{goodBook.title}}
                                            </el-link>
                                            <p :title="goodBook.content">{{goodBook.content}}</p>
                                        </el-col>
                                    </el-row>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="7" class="top-10">
                        <el-card class="top-10-card" :body-style="{ padding: '0px' }" shadow="never">
                            <el-row type="flex" justify="center">
                                <el-col class="top-10-content" :span="20">
                                    <div class="rank-row">
                                        <el-image :src="rankLogoImgUrl" class="rank-logo"></el-image>
                                        <p>热搜榜</p>
                                    </div>
                                    <el-row class="rank-content" v-for="(item, key) in topTenData" :key="key">
                                        <el-col :span="4">
                                            <p>{{item.rank}}</p>
                                        </el-col>
                                        <el-col :span="20">
                                            <el-link :underline="false">{{item.bookName}}</el-link>
                                            <el-divider></el-divider>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "BookRecommendBar",
        data() {
            return {
                msg: "这是书籍推荐组件",
                rankLogoImgUrl: require("../../assets/rankLogo.png"),
                recommendLogoUrl: require("../../assets/recommendLogo.png"),
                topTenData: [
                    {rank: 1, bookName: "祈祷落幕时"},
                    {rank: 2, bookName: "白夜行"},
                    {rank: 3, bookName: "幻夜"},
                    {rank: 4, bookName: "秘密"},
                    {rank: 5, bookName: "信"},
                    {rank: 6, bookName: "单恋"},
                    {rank: 7, bookName: "流星之绊"},
                    {rank: 8, bookName: "放学后"},
                    {rank: 9, bookName: "解忧杂货店"},
                    {rank: 10, bookName: "分身"}
                ],
                goodBookList: [
                    [{
                        url: "https://images-na.ssl-images-amazon.com/images/I/51sDzGa%2BpfL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "醉步男",
                        content: "世界科幻文学至高代表作，日本狂销23年，终于引进正版！同时收录恐怖小说名篇《玩具修理者》"
                    },
                        {
                            url: "https://images-na.ssl-images-amazon.com/images/I/71k2fG9T4FL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                            title: "人性的枷锁",
                            content: "“故事圣手”“天才小说家”毛姆长篇代表作，一本解答人生奥义的希望之书"
                        }],
                    [{
                        url: "https://images-na.ssl-images-amazon.com/images/I/51uU6L%2BrfpL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "怒",
                        content: "日本重量级芥川奖作家吉田修一，《恶人》之后又一新作，比《白夜行》更凄美，比《告白》更深刻，照见都市人无处遁形的孤独"
                    },
                        {
                            url: "https://images-na.ssl-images-amazon.com/images/I/51sDzGa%2BpfL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                            title: "醉步男",
                            content: "世界科幻文学至高代表作，日本狂销23年，终于引进正版！同时收录恐怖小说名篇《玩具修理者》"
                        }]
                ],
                bestBook: {
                    url: "https://images-na.ssl-images-amazon.com/images/I/81pZB30%2BSCL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                    title: "再见，吾爱",
                    author: "雷蒙德·钱德勒",
                    content: "读了《再见，吾爱》才发现，有些人你就是戒不掉，有些事你就是妥协不了！"
                }
            }
        },
        methods: {},
        components: {}
    }
</script>

<style scoped>
    .book-recommend-bar {
        height: 650px;
        background-color: #f0f0f0;
    }

    p {
        text-align: center;
        margin: 0;
    }

    .el-col {
        height: auto;
    }

    .recommend-title-row p {
        font-size: 25px;
        line-height: 100px;
        height: 100px;
    }

    .recommend-table-row {
        height: 550px;
    }

    .total-card {
        height: 550px;
    }

    .best-book-card {
        height: 548px;
        border-radius: 0;
    }

    .best-book-content {
        margin-top: 30px;
    }

    .best-book-card .el-link {
        font-size: 25px;
        color: #000;
        line-height: 30px;
        height: 30px;
    }

    .best-book-card p {
        font-size: 12px;
        color: #9e9e9e;
        height: 20px;
        line-height: 20px;
        text-align: left;
    }

    .best-book-card .best-book-author{
        margin-top: 20px;
    }

    .best-book-card .best-book-inf{
        margin-top: 30px;
    }

    .best-book-card .best-book-image{
        margin-top: 70px;
    }

    .top-10-card {
        height: 548px;
        border-radius: 0;
    }

    .top-10-content {
        height: 510px;
        margin-top: 20px;
    }

    .rank-row {
        height: 40px;
        margin-bottom: 10px;
    }

    .rank-row .el-image {
        height: 39px;
        width: 39px;
    }

    .rank-logo {
        float: left;
    }

    .rank-row p {
        height: 40px;
        display: block;
        line-height: 40px;
        float: left;
        margin-left: 16px;
        font-size: 20px;
    }

    .rank-content {
        height: 40px;
        margin: 5px 0;
    }

    .el-divider {
        margin: 0;
    }

    .rank-content .el-col {
        height: 40px;
    }

    .rank-content p {
        height: 40px;
        line-height: 40px;
        color: #9e9e9e;
    }

    .rank-content .el-link {
        height: 40px;
        line-height: 40px;
        color: #9e9e9e;
    }

    .good-book-card {
        height: 273px;
        border-radius: 0;
    }

    .good-book-img-row {
        margin-top: 20px;
    }

    .good-book-inf-row {
        margin-top: 10px;
    }

    .good-book-inf-row p {
        margin-top: 5px;
        font-size: 12px;
        color: #9e9e9e;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }


</style>